<!--
 * @Author: CemCode cemoment@aliyun.com
 * @Date: 2022-04-13 16:57:25
 * @LastEditors: CemCode cemoment@aliyun.com
 * @LastEditTime: 2022-11-25 20:37:23
 * @FilePath: \vue-blog-2\src\views\desk\home\About.vue
 * @Description: 关于
 * Copyright (c) 2022 by CemCode cemoment@aliyun.com, All Rights Reserved. 
-->
<template>
  <div class="about_main">
    <div class="about_con">
      <img class="about_img" src="@/assets/gugugu.png" />
      <div class="my_base_info">
        <p><span class="title">昵称:</span>CemCode</p>
        <p><span class="title">联系方式:</span> 2289538564@qq.com</p>
        <p><span class="title">毕业于:</span> 家里蹲大学 计算机系</p>
        <p><span class="title">现职位:</span> Web前端攻城狮</p>
        <p><span class="title">扯谈:</span> </p>
        <p>从小就对科学和绘画感兴趣，梦想是成为科学家并兼艺术家，后来成为打工人。</p>
        <p>现在主攻web前端开发，以后会朝全栈发展。希望有大佬带飞。</p>
        <p>后端java基本忘却，现主用nodejs开发。</p>
        <p>有没有发现我的扯谈内容长度在递减</p>
        <p>可秒杀幼儿园绘画界的抽象派绘画者</p>
        <p>原Android原生开发混子</p>
        <p>哲学系低端玩家</p>
        <p>咕咕咕?</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "desk-about",
  data() {
    return {
    }
  }
}
</script>
<style lang="scss" scoped>

@media screen and (max-width:600px){
  .about_img{
    display: none !important;
  }
}
.about_main {
  width: 100%;
  height: 100%;
  z-index: 2;
  box-sizing: border-box;
  padding: 25px;

  .about_con {
    width: 100%;
    height: 75%;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;

    @media screen and (max-width:1050px) {
      .about_img{
        display: none;
      }
    }
    .about_img{
      height: 70%;
      border: 1px solid #eee;
      box-shadow: 0 0 10px 0px rgb(173, 173, 173);
      border-radius: 50px;
      transform: scale(0.8);
    }

    .my_base_info{
      flex: 1 auto;
      height: 90%;
      overflow: scroll;
      border-left: 5px dotted #00aaff6f;
      >p{
        padding: 10px 0 0 10px;
        font-size: 14px;
        color: #666;
      }

      .title{
        background-color: #999;
        padding: 1px 5px;
        color: white;
        border-radius: 2px;
      }

      &::-webkit-scrollbar{
        display: none;
      }
    }
  }
}
</style>